<template>
    <div class="playground" @contextmenu.prevent>
        <NormalPvE v-if="difficultyLevel === 'normal'" />
        <EasyPvE v-if="difficultyLevel === 'easy'" />
        <HardPvE v-if="difficultyLevel === 'hard'" />
        <ExpertPvE v-if="difficultyLevel === 'expert'" />
    </div>
</template>

<script setup>
    import NormalPvE from '@/views/game/playground/pve/level/NormalPvE.vue'
    import { useRoute } from 'vue-router'
    import EasyPvE from '@/views/game/playground/pve/level/EasyPvE.vue'
    import HardPvE from '@/views/game/playground/pve/level/HardPvE.vue'
    import ExpertPvE from '@/views/game/playground/pve/level/ExpertPvE.vue'

    const route = useRoute()
    let difficultyLevel = route.params.level || 'normal'
</script>

<style scoped>
    .playground {
        width: 100%;
        height: 100%;
        margin: 0;
        background-color: rgba(0, 255, 255, 0.8);
    }
</style>
